<template>
	<div>
		<!-- 搜索框 -->
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="100px">
			<el-form-item label="存货档案编码" prop="coding">
				<el-input v-model="queryParams.coding" style="width:160px" placeholder="请输入档案编号" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="产品型号" prop="model">
				<el-input v-model="queryParams.model" placeholder="请输入产品型号" style="width:160px" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="基础库-颜色" prop="color">
				<el-select v-model="queryParams.color" placeholder="颜色" clearable style="width:150px">
					<el-option v-for="dict in colorTypes" :key="dict.dicDataVal" :label="dict.dicDataLabel"
						:value="dict.dicDataVal" />
				</el-select>
			</el-form-item>
			<el-form-item label="产品品牌" prop="brand">
				<el-select v-model="queryParams.brand" placeholder="品牌" style="width:140px" clearable>
					<el-option v-for="dict in brand" :key="dict.id" :label="dict.brandName" :value="dict.brandName" />
				</el-select>
			</el-form-item>
			<el-form-item label="产品分类" prop="classify">
				<treeselect v-model="queryParams.classify" placeholder="产品分类" style="width:140px" clearable
					:options="classify" :normalizer="normalizer" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="quarryList()">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="reset()">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" plain icon="el-icon-tickets" size="mini" @click="templateDown()">模板
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="success" plain icon="el-icon-upload2" size="mini" @click="dataImport()">导入</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="info" plain icon="el-icon-download" size="mini" @click="dataExport()">导出</el-button>
			</el-col>
		</el-row>
		<template>
			<el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%">
				<el-table-column type="index" width="50">
				</el-table-column>
				<el-table-column prop="coding" label="存货档案编码" align="center">
				</el-table-column>
				<el-table-column prop="classify" label="基础库-分类" align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="brand" label="基础库-品牌" align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="model" label="基础库-型号" align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="color" label="基础库-颜色" align="center" show-overflow-tooltip>
					<template slot-scope="scope">
						<div v-for="item in colorTypes" :key="item.dicDataId" :label="item.dicDataLabel"
							:value="item.dicDataVal">
							<div v-if="scope.row.color == item.dicDataVal">
								{{item.dicDataLabel}}
								</v-if>
							</div>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<!-- 分页组件 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryParams.pageNum" :page-sizes="[3, 5, 8, 10]" :page-size="queryParams.pageSize"
			layout="->,total, sizes, prev, pager, next, jumper" :total="queryParams.total">
		</el-pagination>
		<!-- 添加或修改参数配置对话框 -->
		<el-dialog :visible.sync="open" width="500px" append-to-body>
			<el-upload class="upload-demo" ref="upload" action="#" :on-preview="handlePreview" :on-remove="handleRemove"
				:file-list="fileList" :auto-upload="false">
				<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
				<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload"
					:disabled="single">上传到服务器</el-button>
				<div slot="tip" class="el-upload__tip">只能上传xlsx文件</div>
			</el-upload>
			<div>
				<span>
					总记录:{{this.uploadResult.allNums}},成功:{{this.uploadResult.sucNums}},
					失败:{{this.uploadResult.errorNums}}
				</span>
				<span v-if="this.uploadResult.errorFile!=''">入库失败文件:<a href="javaScript:void(0)"
						@click="downloadErrorFile">下载</a></span>
			</div>

			<span slot="footer" class="dialog-footer">
				<el-button @click="open = false">关闭</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	import {
		getDistinctBrand
	} from '@/api/gg/brand.js';
	import {
		getGoodsTypeTree
	} from '@/api/gg/goodsType.js';
	import Treeselect from '@riophae/vue-treeselect'
	import '@riophae/vue-treeselect/dist/vue-treeselect.css'

	export default {
		components: {
			Treeselect
		},
		data() {
			return {
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					total: 1,
					coding: '',
					model: '',
					color: '',
					brand: '',
					classify: null,
				},
				uploadResult: {
					allNums: 0,
					sucNums: 0,
					errorNums: 0,
					errorFile: '',
				},
				classify: [],
				brand: [],
				colorTypes: [],
				dataList: [],
				showSearch: true,
				multiple: true,
				open: false,
				single: true,
				fileList: [],
				normalizer(node) {
					return {
						id: node.typeName,
						label: node.typeName,
						children: node.children,
					}
				},
			};
		},
		methods: {
			//文件列表移除文件时的钩子
			handleRemove(file, fileList) {
				this.fileList.remove(file);
			},
			//点击文件列表中已上传的文件时的钩子
			handlePreview(file) {
				console.log(file);
				this.fileList[0] = file;
				this.single = false;
			},
			//失败文件下载
			downloadErrorFile() {
				axios.request({
					url: 'product/download',
					method: 'get',
					responseType: 'blob',
					params: {
						"path": "excels/errors/" + this.uploadResult.errorFile
					}
				}).then(resp => {
					const blob = new Blob([resp]) //创建一个blob
					const downloadElement = document.createElement('a') //创建一个a链接
					const href = window.URL.createObjectURL(blob) //下载链接
					downloadElement.download = "上传失败产品.xlsx"; // 下载后文件名
					downloadElement.href = href; //链接等于链接
					document.body.appendChild(downloadElement); //将元素加在dom尾部
					downloadElement.click(); //点击a链接
					document.body.removeChild(downloadElement); //点击完后删掉
					window.URL.revokeObjectURL(href); //释放这个url内存
				});
			},
			//上传到服务器
			submitUpload() {
				let f = this.fileList[0];
				let formdata = new FormData();
				console.log(f);
				formdata.append("excel", f.raw);
				axios.post("/product/uploadExcel", formdata, {
					headers: {
						"content-type": "multipart/form-data"
					}
				}).then(resp => {
					if (resp.code == 20000) {
						this.uploadResult.allNums = resp.data.allNums;
						this.uploadResult.sucNums = resp.data.sucNums;
						this.uploadResult.errorNums = resp.data.allNums - resp.data.sucNums;
						this.uploadResult.errorFile = resp.data.errorFile;
						this.quarryAll();
					}
				})
				this.single = true;
			},
			//数据导出
			dataExport() {
				this.$confirm('是否导入当前查询页面的数据?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios.request({
						url: 'product/export',
						method: 'get',
						responseType: 'blob',
						params: this.queryParams
					}).then(resp => {
						const blob = new Blob([resp]) //创建一个blob
						const downloadElement = document.createElement('a') //创建一个a链接
						const href = window.URL.createObjectURL(blob) //下载链接
						downloadElement.download = "产品列表.xlsx"; // 下载后文件名
						downloadElement.href = href; //链接等于链接
						document.body.appendChild(downloadElement); //将元素加在dom尾部
						downloadElement.click(); //点击a链接
						document.body.removeChild(downloadElement); //点击完后删掉
						window.URL.revokeObjectURL(href); //释放这个url内存
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//数据导入
			dataImport() {
				this.open = true;
				this.fileList = [];
				this.uploadResult = {
					allNums: 0,
					sucNums: 0,
					errorNums: 0,
					errorFile: '',
				};
			},
			//模板下载
			templateDown() {
				this.$confirm('是否下载模板文件?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios.request({
						url: 'product/download',
						method: 'get',
						responseType: 'blob',
						params: {
							"path": "excels/templates/产品文件模板.xlsx"
						}
					}).then(resp => {
						const blob = new Blob([resp]) //创建一个blob
						const downloadElement = document.createElement('a') //创建一个a链接
						const href = window.URL.createObjectURL(blob) //下载链接
						downloadElement.download = "产品模板.xlsx"; // 下载后文件名
						downloadElement.href = href; //链接等于链接
						document.body.appendChild(downloadElement); //将元素加在dom尾部
						downloadElement.click(); //点击a链接
						document.body.removeChild(downloadElement); //点击完后删掉
						window.URL.revokeObjectURL(href); //释放这个url内存
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//重置
			reset() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					total: 1,
					coding: '',
					model: '',
					color: '',
					brand: '',
					classify: '',
				};
			},
			//查询
			quarryList() {
				this.quarryAll(this.queryParams);
			},
			//每页数量改变
			handleSizeChange(val) {
				this.queryParams.pageSize = val;
				this.quarryAll(this.queryParams);
			},
			//页码改变
			handleCurrentChange(val) {
				this.queryParams.pageNum = val;
				this.quarryAll(this.queryParams);
			},
			//s设置表头行的样式
			tableHeaderColor({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				return 'background-color:#dcdcdc;color:#6b6b6b;font-wight:100;font-size:15px;text-align:center'
			},
			quarryAll(params) {
				this.$axios.get("/product", {
					params: params
				}).then(resp => {
					if (resp.code == 20000) {
						this.dataList = resp.data.list;
						this.queryParams.pageNum = resp.data.pageNum;
						this.queryParams.pageSize = resp.data.pageSize;
						this.queryParams.total = resp.data.total;
					}
				})
			},
		},
		mounted() {
			this.getDictItems("phone_color").then(resp => {
				this.colorTypes = resp.data;
			});

			getDistinctBrand().then(resp => {
				this.brand = resp.data;
			});
			getGoodsTypeTree().then(resp => {
				this.classify = resp.data;
			})

			this.quarryAll();
		}
	};
</script>

<style>
</style>
